<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulaire de connexion en Ajax avec JQuery et PHP</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
	$("#connexionForm").submit( function() {							 
		$.ajax({
		   type: "POST",
		   url: "login.php",
		   data: "login="+$("#login").val()+"&pass="+$("#pass").val(),
		   success: function(msg){
				//alert(msg);
				if(msg!=1) // si la connexion en php a fonctionnée
				{
					$("div#connexion").html("<span id=\"confirmMsg\">Vous &ecirc;tes maintenant connect&eacute;.</span>");
					// on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place
				}
				else // si la connexion en php n'a pas fonctionnée
				{
					$("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" />&nbsp;Erreur lors de la connexion, veuillez v&eacute;rifier votre login et votre mot de passe.");
					// on affiche un message d'erreur dans le span prévu à cet effet
				}
		   }
		});
		return false;
	});
});
</script>

<style>
/* mise en forme de la page */
.center {text-align:center;}


div#container { width:600px; margin:100px auto; padding:25px; border:1px solid #bbb; }

div#connexion fieldset{	margin-bottom: 15px;padding: 0 10px; background: #f2f2f2; border: 0; }
div#connexion legend{ padding: 5px; background: #2193bd; font-weight: bold; color: #fff; }
div#connexion label{ width:150px; display:block; float:left; }
div#connexion input.bouton { cursor:pointer; background:#2193bd url(asterisk_yellow.png) no-repeat 5px 50%; padding:4px 10px; color:#fff; border:none; font-weight:bold; padding-left:20px; }
div#connexion span#erreur {color:#f00; font-weight:bold; font-size:0.8em; }
div#connexion span#confirmMsg {color:#2193bd; font-weight:bold; font-size:0.8em; background: url(asterisk_yellow.png) no-repeat 0 -1px; padding-left:20px; line-height:18px; }
</style>

</head>

<body>
<div id="container">
	<div id="connexion"> <!-- bloc contenant le formulaire -->
		<form name="connexionForm" id="connexionForm" action="#"><!-- début du formulaire de connexion -->
	    	<fieldset>
		    <p>		    
			<span id="erreur"></span><!-- span qui contiendra les éventuels messages d'erreur -->
		    </p>
		    <p>
			
		    
		    <p class="center">
		    	<input type="submit" value="Affecter" class="bouton" /><!-- bouton de connexion -->
		    </p>
		</fieldset>
	    </form><!-- fin du formulaire -->
	</div><!-- fin du bloc contenant le formulaire -->


</div>

</body>
</html>
